<template>
  <div>
       <el-row :gutter="10">
            <el-col :span="10">
               <Cards>
                      <template #title>
                            <div class="clandadd">
                              <div>任务日历</div>
                              <div><button>添加日程</button></div>
                            </div>
                      </template>
                      <template #body>
                         <div class="clander">
                     <div class="header">
                            <div>
                              <div @click="remoMouth"><el-icon><DArrowLeft/></el-icon></div>
                              <div>{{years<10?`0${years}`:years}}年{{mouths<10?`0${mouths}`:mouths}}月</div>
                              <div @click="addMouth"><el-icon><DArrowRight /></el-icon></div></div>
                            <div><span>累计加班 12 小时</span><span>完成任务 5 个</span></div>
                     </div>
                     <v-clander :year="years" :mouth="mouths" :datas="datas" ></v-clander>
                     </div>
                      </template>
               </Cards>
              
            </el-col>
            <el-col :span="14">
                  <div class="echarlists">
                      <div>
                         <Cards>
                              <template #title>任务趋势</template>
                              <template #body>
                                   <div class="lineEcharts">
                                        <EchartTemp ref="echarsOne" id="echat1" :datas="linedatas"></EchartTemp>
                                   </div>
                              </template>
                         </Cards>
                      </div>
                      <div>
                          <div>
                              <Cards>
                              <template #title>分类</template>
                              <template #body>
                                   <div class="lineEcharts">
                                        <EchartTemp ref="echarsOne" id="echat2" :datas="bardatas"></EchartTemp>
                                   </div>
                              </template>
                         </Cards>
                          </div>
                          <div>
                              <Cards>
                              <template #title>占比</template>
                              <template #body>
                                   <div class="lineEcharts">
                                        <EchartTemp ref="echarsOne" id="echat3" :datas="piedatas"></EchartTemp>
                                   </div>
                              </template>
                             </Cards>
                          </div>
                      </div>
                  </div>
                 
            </el-col>
       </el-row>   
  </div>
</template>

<script setup lang="ts">
 import { defineAsyncComponent,ref } from 'vue';
 import {piedatas,linedatas,bardatas} from './data'
 const VClander = defineAsyncComponent(()=>import('./component/clander.vue'));
 const Cards  = defineAsyncComponent(()=>import('@/components/Cards.vue'));
 const EchartTemp = defineAsyncComponent(() => import("@/components/EchartTemp.vue"));
 const date = new Date();
 const years = ref<Number>(date.getFullYear()); 
 const mouths = ref<Number>(date.getMonth()+1);
 
// 数据转化
const datas = {
    "2022":{
       "9":{
          "1":{
               lists:[{text:'修复中台修复中台修复中台修台修复中台修台修复中台修台修复中台修台修复中台修复中台',type:'add'},{text:'修复中台修复中台修复中台修复中台',type:'adda'},{text:'修复中台修复中台修复中台修复中台',type:'add'}],
               hours:2 
          },
          "3":{
               lists:[{text:'修复中台修复中台修复中台修台修复中台修台修复中台修台修复中台修台修复中台修复中台',type:'add'},{text:'修复中台修复中台修复中台修复中台',type:'adda'},{text:'修复中台修复中台修复中台修复中台',type:'add'}],
               hours:2 
          },
          "4":{
               lists:[{text:'修复中台修复中台修复中台修台修复中台修台修复中台修台修复中台修台修复中台修复中台',type:'add'},{text:'修复中台修复中台修复中台修复中台',type:'adda'},{text:'修复中台修复中台修复中台修复中台',type:'add'}],
               hours:2 
          }
       }
    }
}
const addMouth = ()=>{
     let m = mouths.value+1
     if(m>12){
          mouths.value=1
          years.value = years.value+1 
     }else{
          mouths.value=m 
     }
}
const remoMouth = ()=>{
     let m = mouths.value-1
     if(m<=0){
          mouths.value=12
          years.value = years.value-1 
     }else{
          mouths.value=m 
     }
} 
</script>

<style lang="scss" scoped>
     .clandadd{
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          button{
               background: #6366f1;
               color: #fff;
               padding: .1rem .8rem;
               font-size: .7rem;
               border-radius: 5px;
               box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 3px rgba(0, 0, 0, .04);
          }
     }
     .echarlists{
          .lineEcharts{
           width: 100%;
           height: 34vh;
     }
     &>div:nth-of-type(1){
          margin-bottom: .6rem;
          &+div{
               display: flex;
               
               &>div{
                    flex: 1;
                    &:nth-child(1){
                      margin-right: .7rem;
                    }
                   
               }
          }
     }
     }
    
.header{
      width: 100%;
      display: flex; 
      justify-content: space-between;
      align-items: center;
      padding:1rem .1rem;
      &>div:nth-of-type(1){
            font-size: 1rem;
            color: #666;
            display: flex;
            align-items: center;
            &>div{ 
               display: flex;
               align-items: center;
               &:nth-of-type(2){
                    margin: 0 .3rem;
               }
               &:not(:nth-of-type(2)){
                    cursor: pointer; 
               }
            }
            &+div{
              
               color: #666;
               background: #6366f1;
               color: aliceblue;
               border-radius: 5px; 
               cursor: pointer;
               box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 3px rgba(0, 0, 0, .04);
               &>span{
                    padding: .4rem .5rem; 
                    font-size: .3rem;
                    &:nth-of-type(1){
                          border-right: 1px solid rgb(226, 225, 225);
                    }
               }
            }
      }
}
 
</style>